<template>
	<view class="conter">

		<header-box :title="title"></header-box>

		<navigator url="/pages/tab/me" class="flex-box" style="margin-top: 20rpx;">
			<view class="left-box" style="display: flex;align-items: center;">
				<view class="left-image">
					<image src="../../static/image/11.jpg" mode=""></image>
				</view>
				<view class="">
					张崽崽
				</view>
			</view>
			<view class="money">
				￥160.00
			</view>
		</navigator>
		
		


		<view class="box-info" v-if="info == 1">
			<view class="box1">
				<view class="box1-left" @click="image">
					<view class="box1-left-image">
						<image :src="img[0]" mode=""></image>
						<!-- <u-image :src="img[0]" :lazy-load="true"></u-image> -->
					</view>
					<view class="displex-box">
						4张
					</view>
				</view>
				<view class="" style=" color: #717171;">
					<view class="" style="font-size: 30rpx; color: #000000;">
						成都维纳斯酒店公寓
					</view>
					<view class="" style="margin: 10rpx 0;">
						<u-icon name="clock" color="#717171" style="margin-right: 10rpx;"></u-icon>
						上传时间:2021-03-20
					</view>
					<view class="">
						<u-icon name="map" color="#717171" style="margin-right: 10rpx;"></u-icon>
						地址：草市街道灶君庙街37号恒昌大厦1楼
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="box-info" v-if="info == 2">
			<view class="box1">
				<view class="box1-left" @click="image">
					<view class="box1-left-image">
						<image :src="img[0]" mode=""></image>
						<!-- <u-image :src="img[0]" :lazy-load="true"></u-image> -->
					</view>
					<view class="displex-box">
						4张
					</view>
				</view>
				<view class="" style=" color: #717171;" @click="gotoPhonInfo">
					<view class="flex-box" style="font-size: 30rpx; color: #000000;">
						<view class="">
							成都维纳斯酒店公寓
						</view>
						<view class="">
							<u-icon name="edit-pen" color="#4E4E4E" size="28"></u-icon>
						</view>
					</view>
					<view class="" style="margin: 10rpx 0;">
						<u-icon name="clock" color="#717171" style="margin-right: 10rpx;"></u-icon>
						上传时间:2021-03-20
					</view>
					<view class="">
						<u-icon name="map" color="#717171" style="margin-right: 10rpx;"></u-icon>
						地址：草市街道灶君庙街37号恒昌大厦1楼
					</view>
				</view>
			</view>
		</view>
		


		<view class="flex-box box2">
			<view class="" style="color: #000000; font-weight: 600;">
				购买用户
			</view>
			<!-- <view class="" style="color: #3B43BF; font-size: 26rpx;">
				查看全部
			</view> -->
		</view>


		<view class="user-info" v-for="(item, index) in list" :key="index">
			<view class="flex-box">
				<view class="user-info-left">
					<view class="user-image">
						<image src="../../static/image/11.jpg" mode=""></image>
					</view>
					<view class="">
						{{item.name}}***哔购买了该图册
					</view>
				</view>
				<view class="">
					<u-rate :count="count" :v-model="item.value"></u-rate>
				</view>
			</view>
		</view>



		<!-- <view class="flex-box" style="height: 90rpx;">
			<view class="">
				下载地址：
			</view>
			<view class="bgc-text" @click="copy">
				复制链接
			</view>
		</view>

		<view class="bgc">
			111
		</view>



		<view class="flex-box" style="height: 90rpx;">
			<view class="">
				下载密码：
			</view>
			<view class="bgc-text" @click="copy">
				复制密码
			</view>
		</view>


		<view class="bgc">
			1112222
		</view> -->


		<view v-if="info == 1" class="flex-box buy">
			<view class="">
				合计: <text style="color: #FF0000; fw"> ￥16.3</text>
			</view>
			<view class="puy-btn" @click="buy">
				立即购买
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '图册详情',
				count: 4,
				value: 2,
				list: [{
					name: '1111',
					value: 2
				}, {
					name: '3333',
					value: 2
				}],
				img: [],
				info: '',
			}
		},

		onLoad(e) {
			// this.info = e.info
			this.info = e.info
			this.img = [
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1711988758,3749142602&fm=15&gp=0.jpg',
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1711988758,3749142602&fm=15&gp=0.jpg',
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1711988758,3749142602&fm=15&gp=0.jpg',
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1711988758,3749142602&fm=15&gp=0.jpg',
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1711988758,3749142602&fm=15&gp=0.jpg',
			]
		},
		onReachBottom() {

		},
		methods: {
			
			
			gotoPhonInfo() {
				uni.navigateTo({
					url: '/pages/site/uploadPhone?info=' + this.info
				})
			},
			
			

			image() {
				console.log(9999);
				uni.previewImage({
					urls: [...this.img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},

			buy() {
				console.log('唤起支付')
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(Date.now()),
					nonceStr: 'A1B2C3D4E5',
					package: 'prepay_id=wx20180101abcdefg',
					signType: 'MD5',
					paySign: '',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});

			},
			
			// 复制文本
			copy() {
				uni.setClipboardData({
				    data: 'hello',
				    success: function () {
				        console.log('success');
						// this.$tools.msg('复制成功')
				    }
				});
				
				// uni.getClipboardData({
				//     success: function (res) {
				//         console.log(res.data);
				//     }
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}

		.left-box {

			.left-image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
				border-radius: 30rpx !important;

				image {
					width: 100%;
					height: 100%;
					border-radius: 30rpx !important;
				}
			}
		}

		.money {
			width: 160rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			color: #FF0000;
			background-color: #FFE5E5;
		}



		.box-info {
			width: 100%;
			height: 240rpx;
			margin-top: 30rpx;
			border-bottom: 1rpx solid #F8F8F8;

			.box1 {
				display: flex;
				align-items: center;

				.box1-left {
					width: 148rpx;
					height: 148rpx;
					position: relative;
					border-radius: 10rpx;
					margin-right: 30rpx;

					.box1-left-image {
						width: 148rpx;
						height: 148rpx;
					}

					.displex-box {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 120rpx;
						height: 46rpx;
						background-color: #000000;
						opacity: 0.4;
						color: #FFFFFF;
						line-height: 46rpx;
						text-align: center;
						border-radius: 14rpx;
						transform: translate(-50%, -50%);
					}
				}
			}
		}



		.box2 {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
		}


		.user-info {
			width: 100%;
			// height: 100rpx;
			// line-height: 100rpx;
			color: #232323;
			border-radius: 10rpx;
			padding: 20rpx;
			background-color: #F8F8F8;

			.user-info-left {
				display: flex;
				align-items: center;
			}

			.user-image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;

				image {
					border-radius: 10rpx;
				}
			}

			.box3 {
				height: 80rpx;
				display: flex;
				align-items: center;
			}
		}


		.bgc {
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 30rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			color: #3B43BF;
		}

		.bgc-text {
			padding: 10rpx 25rpx;
			border-radius: 35rpx;
			color: #717171;
			background-color: #F8F8F8;
		}





		.buy {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 70rpx;
			left: 0;
			color: #000000;
			padding: 0 30rpx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;

			.puy-btn {
				width: 240rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				border-radius: 35rpx;
				background-color: #3B43BF;
			}
		}
	}
</style>
